/**
 * @file 系统架构（基于实际项目结构）
 * @date 2025/11/20 00:00:00
 * @author system（AI生成）
 */

import styles from './index.less';
import { Card, Col, Row, Divider, Typography, Tag, Timeline, Tabs, Collapse } from 'antd';
import { ArrowRightOutlined, CheckCircleOutlined, DatabaseOutlined, CodeOutlined, ServerOutlined, CloudOutlined, StarOutlined } from '@ant-design/icons';

const { Title, Paragraph, Text } = Typography;
const { Panel } = Collapse;

const ArchitectureEnhanced = () => {
  return (
    <div className={styles.container}>
      <Title level={2} style={{ textAlign: 'center', marginBottom: '24px' }}>系统架构概览</Title>
      
      {/* 系统总体架构 */}
      <Card title="系统总体架构" style={{ marginBottom: '24px' }} className="arch-card" bordered={false}>
        <Paragraph>本系统采用前后端分离架构，基于最新项目结构和技术栈：</Paragraph>
        <div style={{ display: 'flex', justifyContent: 'center', margin: '16px 0' }}>
          <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', justifyContent: 'center' }}>
            <div className="arch-block timeline-item" style={{ padding: '16px', backgroundColor: '#e6f7ff', borderRadius: '4px', margin: '8px', textAlign: 'center', minWidth: '180px' }}>
              <Text strong>React 前端应用</Text>
              <br />
              <Text type="secondary" style={{ fontSize: '12px' }}>react-antd-webpack</Text>
            </div>
            <div style={{ fontSize: '24px', color: '#999', margin: '0 8px' }}>⟷</div>
            <div className="arch-block" style={{ padding: '16px', backgroundColor: '#f6ffed', borderRadius: '4px', margin: '8px', textAlign: 'center', minWidth: '180px' }}>
              <Text strong>Node.js 后端</Text>
              <br />
              <Text type="secondary" style={{ fontSize: '12px' }}>node-express-mysql</Text>
            </div>
            <div style={{ fontSize: '24px', color: '#999', margin: '0 8px' }}>⟷</div>
            <div className="arch-block" style={{ padding: '16px', backgroundColor: '#fff7e6', borderRadius: '4px', margin: '8px', textAlign: 'center', minWidth: '180px' }}>
              <Text strong>MySQL 数据库</Text>
              <br />
              <Text type="secondary" style={{ fontSize: '12px' }}>关系型数据存储</Text>
            </div>
            <div style={{ fontSize: '24px', color: '#999', margin: '0 8px' }}>⟷</div>
            <div className="arch-block" style={{ padding: '16px', backgroundColor: '#f9f0ff', borderRadius: '4px', margin: '8px', textAlign: 'center', minWidth: '180px' }}>
              <Text strong>Redis 缓存</Text>
              <br />
              <Text type="secondary" style={{ fontSize: '12px' }}>高性能数据缓存</Text>
            </div>
          </div>
        </div>
        <div style={{ marginTop: '16px' }}>
          <p style={{ fontSize: '14px' }}><Text strong>核心特性：</Text></p>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', marginTop: '8px' }}>
            <Tag color="blue" className="feature-tag">前后端分离架构</Tag>
              <Tag color="green" className="feature-tag">增强型日志系统</Tag>
              <Tag color="purple" className="feature-tag">SSE实时通信</Tag>
              <Tag color="orange" className="feature-tag">智能缓存策略</Tag>
              <Tag color="red" className="feature-tag">统一错误处理</Tag>
              <Tag color="cyan" className="feature-tag">定时任务调度</Tag>
              <Tag color="lime" className="feature-tag">健康检查机制</Tag>
              <Tag color="magenta" className="feature-tag">优雅关闭处理</Tag>
          </div>
        </div>
      </Card>

      <Divider orientation="left" className="section-title">前端架构</Divider>
      
      {/* 前端技术栈 */}
      <Row gutter={16} className="tech-stack-container">
        <Col span={8}>
          <Card type="inner" title="核心框架" className="tech-card">
            <div className="tech-item">
                <Row gutter={16} align="middle">
                  <Col span={4}><CodeOutlined style={{ fontSize: '24px', color: '#1890ff' }} /></Col>
                  <Col span={20}>
                    <Text strong>React 18.2.0</Text>
                    <Paragraph style={{ margin: '4px 0 0' }}>高性能前端UI库，提供声明式渲染和组件化架构</Paragraph>
                  </Col>
                </Row>
                <div style={{ marginTop: '8px' }}>
                  <Tag color="blue">React 18.2.0</Tag>
                  <Tag color="blue">Webpack 5.99.9</Tag>
                  <Tag color="blue">函数式组件</Tag>
                </div>
              </div>
          </Card>
        </Col>
        <Col span={8}>
          <Card type="inner" title="UI 组件库">
            <div>
              <p>Ant Design 5 企业级组件库</p>
              <div style={{ marginTop: '8px' }}>
                <Tag color="purple">Antd 5.26.2</Tag>
                <Tag color="purple">@ant-design/icons</Tag>
                <Tag color="purple">@ant-design/charts</Tag>
              </div>
            </div>
          </Card>
        </Col>
        <Col span={8}>
          <Card type="inner" title="路由管理">
            <div>
              <p>React Router V6 动态路由</p>
              <div style={{ marginTop: '8px' }}>
                <Tag color="green">React Router 6.25.1</Tag>
                <Tag color="green">动态路由加载</Tag>
                <Tag color="green">权限路由守卫</Tag>
              </div>
            </div>
          </Card>
        </Col>
      </Row>

      {/* 前端状态管理与构建 */}
      <Row gutter={16} style={{ marginTop: 16 }}>
        <Col span={8}>
          <Card type="inner" title="状态管理">
            <div>
              <p>Redux Toolkit 现代化状态管理</p>
              <div style={{ marginTop: '8px' }}>
                <Tag color="cyan">@reduxjs/toolkit 2.2.6</Tag>
                <Tag color="cyan">react-redux 9.2.0</Tag>
                <Tag color="cyan">异步数据流</Tag>
              </div>
            </div>
          </Card>
        </Col>
        <Col span={8}>
          <Card type="inner" title="HTTP 客户端">
            <div>
              <p>Axios 网络请求库</p>
              <div style={{ marginTop: '8px' }}>
                <Tag color="orange">Axios 1.7.4</Tag>
                <Tag color="orange">请求拦截器</Tag>
                <Tag color="orange">响应处理</Tag>
                <Tag color="orange">请求取消</Tag>
              </div>
            </div>
          </Card>
        </Col>
        <Col span={8}>
          <Card type="inner" title="开发工具">
            <div>
              <p>现代化开发工具链</p>
              <div style={{ marginTop: '8px' }}>
                <Tag color="red">ESLint 9.39.1</Tag>
                <Tag color="red">Babel 7.26.0</Tag>
                <Tag color="red">热模块替换</Tag>
                <Tag color="red">Thread-loader</Tag>
              </div>
            </div>
          </Card>
        </Col>
      </Row>
      
      {/* 前端工具库 */}
      <Row gutter={16} style={{ marginTop: 16 }}>
        <Col span={8}>
          <Card type="inner" title="时间处理">
            <div>
              <p>轻量级日期时间处理</p>
              <div style={{ marginTop: '8px' }}>
                <Tag color="lime">Day.js 1.11.12</Tag>
                <Tag color="lime">日期格式化</Tag>
                <Tag color="lime">时区处理</Tag>
              </div>
            </div>
          </Card>
        </Col>
        <Col span={8}>
          <Card type="inner" title="工具函数">
            <div>
              <p>实用工具函数库</p>
              <div style={{ marginTop: '8px' }}>
                <Tag color="magenta">Lodash 4.17.21</Tag>
                <Tag color="magenta">函数式编程</Tag>
                <Tag color="magenta">深拷贝</Tag>
              </div>
            </div>
          </Card>
        </Col>
        <Col span={8}>
          <Card type="inner" title="构建优化">
            <div>
              <p>Webpack 5 构建优化</p>
              <div style={{ marginTop: '8px' }}>
                <Tag color="blue">Tree-shaking</Tag>
                <Tag color="blue">代码分割</Tag>
                <Tag color="blue">路径别名</Tag>
                <Tag color="blue">多环境配置</Tag>
              </div>
            </div>
          </Card>
        </Col>
      </Row>

      {/* 前端页面结构 */}
      <Row gutter={16} style={{ marginTop: 16 }}>
        <Col span={12}>
          <Card type="inner" title="页面模块结构">
            <div>
              <p>基于业务功能的页面组织：</p>
              <ul style={{ margin: '8px 0 0 0', fontSize: '13px' }}>
                <li><Text code>home</Text> - 首页仪表板</li>
                <li><Text code>login</Text> - 登录认证页面</li>
                <li><Text code>setting/*</Text> - 系统设置模块</li>
                <li><Text code>monitor/*</Text> - 监控管理模块</li>
                <li><Text code>architecture</Text> - 系统架构页面</li>
                <li><Text code>userinfo</Text> - 用户信息管理</li>
              </ul>
            </div>
          </Card>
        </Col>
        <Col span={12}>
          <Card type="inner" title="核心功能模块">
            <div>
              <p>系统核心业务功能：</p>
              <ul style={{ margin: '8px 0 0 0', fontSize: '13px' }}>
                <li><Text strong>用户管理：</Text>用户CRUD、部门管理</li>
                <li><Text strong>权限管理：</Text>角色管理、权限分配</li>
                <li><Text strong>系统监控：</Text>错误监控、性能监控</li>
                <li><Text strong>实时通信：</Text>SSE推送、在线状态</li>
              </ul>
            </div>
          </Card>
        </Col>
      </Row>

      <Divider orientation="left" style={{ marginTop: '24px' }} className="section-title">后端架构</Divider>
      
      {/* 后端技术栈 */}
      <Row gutter={16}>
        <Col span={12}>
          <Card type="inner" title="核心框架">
            <div>
              <p>Node.js + Express 高性能后端</p>
              <div style={{ marginTop: '8px' }}>
                <Tag color="green">Node.js 18+</Tag>
                <Tag color="green">Express 5.1.0</Tag>
                <Tag color="green">中间件机制</Tag>
                <Tag color="green">异步非阻塞</Tag>
              </div>
            </div>
          </Card>
        </Col>
        <Col span={12}>
          <Card type="inner" title="数据库连接">
            <div>
              <p>MySQL2 高性能数据库驱动</p>
              <div style={{ marginTop: '8px' }}>
                <Tag color="yellow">MySQL2 3.15.2</Tag>
                <Tag color="yellow">连接池管理</Tag>
                <Tag color="yellow">事务支持</Tag>
                <Tag color="yellow">SQL 防注入</Tag>
              </div>
            </div>
          </Card>
        </Col>
      </Row>
      
      {/* 后端基础设施 */}
      <Row gutter={16} style={{ marginTop: 16 }}>
        <Col span={8}>
          <Card type="inner" title="缓存服务">
            <div>
              <p>Redis 高性能缓存</p>
              <div style={{ marginTop: '8px' }}>
                <Tag color="purple">ioredis 5.8.2</Tag>
                <Tag color="purple">内存缓存降级</Tag>
                <Tag color="purple">缓存自动切换</Tag>
                <Tag color="purple">连接池管理</Tag>
              </div>
            </div>
          </Card>
        </Col>
        <Col span={8}>
          <Card type="inner" title="认证授权">
            <div>
              <p>JWT 无状态认证</p>
              <div style={{ marginTop: '8px' }}>
                <Tag color="blue">jsonwebtoken 9.0.2</Tag>
                <Tag color="blue">bcryptjs 3.0.2</Tag>
                <Tag color="blue">Token自动清理</Tag>
                <Tag color="blue">验证码保护</Tag>
              </div>
            </div>
          </Card>
        </Col>
        <Col span={8}>
          <Card type="inner" title="API文档">
            <div>
              <p>Swagger 自动API文档</p>
              <div style={{ marginTop: '8px' }}>
                <Tag color="orange">swagger-jsdoc 6.2.8</Tag>
                <Tag color="orange">swagger-ui-express 5.0.1</Tag>
                <Tag color="orange">自动生成</Tag>
                <Tag color="orange">在线调试</Tag>
              </div>
            </div>
          </Card>
        </Col>
      </Row>

      {/* 后端控制器结构 */}
      <Row gutter={16} style={{ marginTop: 16 }}>
        <Col span={12}>
          <Card type="inner" title="控制器模块">
            <div>
              <p>基于业务功能的控制器设计（13个控制器）：</p>
              <ul style={{ margin: '8px 0 0 0', fontSize: '13px' }}>
                <li><Text code>authController</Text> - 认证授权管理</li>
                <li><Text code>publicAuthController</Text> - 公共认证服务</li>
                <li><Text code>userController</Text> - 用户信息管理</li>
                <li><Text code>roleController</Text> - 角色权限管理</li>
                <li><Text code>menuController</Text> - 菜单配置管理</li>
                <li><Text code>departmentController</Text> - 部门组织管理</li>
                <li><Text code>monitorController</Text> - 监控数据管理</li>
                <li><Text code>sseController</Text> - 实时推送服务</li>
              </ul>
            </div>
          </Card>
        </Col>
        <Col span={12}>
          <Card type="inner" title="中间件体系">
            <div>
              <p>完整的请求处理中间件链：</p>
              <ul style={{ margin: '8px 0 0 0', fontSize: '13px' }}>
                <li><Text strong>认证中间件：</Text>JWT Token验证</li>
                <li><Text strong>权限中间件：</Text>RBAC权限控制</li>
                <li><Text strong>日志中间件：</Text>请求日志记录</li>
                <li><Text strong>错误处理：</Text>统一错误响应</li>
                <li><Text strong>参数验证：</Text>请求数据校验</li>
                <li><Text strong>请求ID中间件：</Text>链路追踪和日志关联</li>
                <li><Text strong>CORS中间件：</Text>跨域资源共享支持</li>
              </ul>
            </div>
          </Card>
        </Col>
      </Row>

      {/* 后端核心服务 */}
      <Row gutter={16} style={{ marginTop: 16 }}>
        <Col span={8}>
          <Card type="inner" title="认证安全">
            <div>
              <p>多层级安全认证体系：</p>
              <ul style={{ margin: '8px 0 0 0', fontSize: '13px' }}>
                <li>JWT 双Token机制</li>
                <li>密码加盐哈希存储</li>
                <li>验证码防护机制</li>
                <li>登录日志审计</li>
                <li>Token自动清理</li>
                <li>过期Token自动续期</li>
              </ul>
            </div>
          </Card>
        </Col>
        <Col span={8}>
          <Card type="inner" title="实时通信">
            <div>
              <p>Server-Sent Events 推送：</p>
              <ul style={{ margin: '8px 0 0 0', fontSize: '13px' }}>
                <li>实时消息推送</li>
                <li>强制登出功能</li>
                <li>在线状态管理</li>
                <li>SSE管理器（单例模式）</li>
                <li>心跳检测机制</li>
                <li>连接池管理</li>
                <li>非活动连接清理</li>
              </ul>
            </div>
          </Card>
        </Col>
        <Col span={8}>
          <Card type="inner" title="增强日志系统">
            <div>
              <p>enhanced-logger 增强功能：</p>
              <ul style={{ margin: '8px 0 0 0', fontSize: '13px' }}>
                <li>结构化日志记录</li>
                <li>请求链路追踪</li>
                <li>性能监控统计</li>
                <li>错误堆栈捕获</li>
                <li>日志级别管理</li>
                <li>错误对象序列化</li>
              </ul>
            </div>
          </Card>
        </Col>
      </Row>
      
      {/* 后端基础设施 */}
      <Row gutter={16} style={{ marginTop: 16 }}>
        <Col span={8}>
          <Card type="inner" title="定时任务">
            <div>
              <p>灵活的定时任务调度：</p>
              <ul style={{ margin: '8px 0 0 0', fontSize: '13px' }}>
                <li>数据库健康检查</li>
                <li>Redis健康检查</li>
                <li>Token自动清理</li>
                <li>SSE心跳检测</li>
                <li>基于配置的调度</li>
              </ul>
            </div>
          </Card>
        </Col>
        <Col span={8}>
          <Card type="inner" title="健康检查">
            <div>
              <p>服务健康监控机制：</p>
              <ul style={{ margin: '8px 0 0 0', fontSize: '13px' }}>
                <li>/health 端点监控</li>
                <li>数据库连接状态</li>
                <li>Redis连接状态</li>
                <li>缓存类型检测</li>
                <li>实时状态报告</li>
              </ul>
            </div>
          </Card>
        </Col>
        <Col span={8}>
          <Card type="inner" title="系统管理">
            <div>
              <p>系统级功能支持：</p>
              <ul style={{ margin: '8px 0 0 0', fontSize: '13px' }}>
                <li>环境变量管理</li>
                <li>优雅关闭处理</li>
                <li>资源自动释放</li>
                <li>信号处理机制</li>
                <li>多环境配置</li>
              </ul>
            </div>
          </Card>
        </Col>
      </Row>

      <Divider orientation="left" style={{ marginTop: '24px' }} className="section-title">数据流架构</Divider>
      
      {/* 数据流设计 */}
      <Card type="inner" title="系统数据流" style={{ marginBottom: '16px' }} className="arch-card">
        <Tabs defaultActiveKey="standard">
          <Tabs.TabPane tab="标准请求-响应流" key="standard">
            <Row gutter={16}>
              <Col span={12}>
                <Card type="inner" title="前端数据流">
                  <Timeline 
                    style={{ marginTop: '16px' }}
                    items={[
                      {color: 'blue',
                        className: 'timeline-item',
                        children: (
                          <>
                            <Text strong>用户操作</Text>
                            <br />
                            <Text type="secondary" style={{ fontSize: '12px' }}>页面交互触发事件</Text>
                          </>
                        )
                      },
                      {
                        color: 'green',
                        children: (
                          <>
                            <Text strong>Redux Action</Text>
                            <br />
                            <Text type="secondary" style={{ fontSize: '12px' }}>状态更新触发异步操作</Text>
                          </>
                        )
                      },
                      {
                        color: 'orange',
                        children: (
                          <>
                            <Text strong>Axios 请求</Text>
                            <br />
                            <Text type="secondary" style={{ fontSize: '12px' }}>HTTP请求发送，附加请求ID</Text>
                          </>
                        )
                      },
                      {
                        color: 'red',
                        children: (
                          <>
                            <Text strong>状态更新</Text>
                            <br />
                            <Text type="secondary" style={{ fontSize: '12px' }}>响应数据更新组件状态</Text>
                          </>
                        )
                      }
                    ]}
                  />
                </Card>
              </Col>
              <Col span={12}>
                <Card type="inner" title="后端数据流">
                  <Timeline 
                    style={{ marginTop: '16px' }}
                    items={[
                      {
                        color: 'blue',
                        children: (
                          <>
                            <Text strong>请求ID生成</Text>
                            <br />
                            <Text type="secondary" style={{ fontSize: '12px' }}>requestIdMiddleware创建请求标识</Text>
                          </>
                        )
                      },
                      {
                        color: 'green',
                        children: (
                          <>
                            <Text strong>中间件处理</Text>
                            <br />
                            <Text type="secondary" style={{ fontSize: '12px' }}>认证、权限、日志验证</Text>
                          </>
                        )
                      },
                      {
                        color: 'orange',
                        children: (
                          <>
                            <Text strong>业务逻辑</Text>
                            <br />
                            <Text type="secondary" style={{ fontSize: '12px' }}>控制器处理业务逻辑</Text>
                          </>
                        )
                      },
                      {
                        color: 'purple',
                        children: (
                          <>
                            <Text strong>缓存操作</Text>
                            <br />
                            <Text type="secondary" style={{ fontSize: '12px' }}>Redis/内存缓存读写</Text>
                          </>
                        )
                      },
                      {
                        color: 'red',
                        children: (
                          <>
                            <Text strong>数据操作</Text>
                            <br />
                            <Text type="secondary" style={{ fontSize: '12px' }}>MySQL数据库CRUD操作</Text>
                          </>
                        )
                      },
                      {
                        color: 'cyan',
                        children: (
                          <>
                            <Text strong>统一响应</Text>
                            <br />
                            <Text type="secondary" style={{ fontSize: '12px' }}>response工具格式化输出</Text>
                          </>
                        )
                      }
                    ]}
                  />
                </Card>
              </Col>
            </Row>
          </Tabs.TabPane>
          <Tabs.TabPane tab="SSE实时通信流" key="sse">
            <Row gutter={16}>
              <Col span={24}>
                <Card type="inner" title="SSE服务器推送流程">
                  <Timeline 
                    style={{ marginTop: '16px' }}
                    items={[
                      {
                        color: 'blue',
                        children: (
                          <>
                            <Text strong>前端连接建立</Text>
                            <br />
                            <Text type="secondary" style={{ fontSize: '12px' }}>EventSource API建立SSE连接</Text>
                          </>
                        )
                      },
                      {
                        color: 'green',
                        children: (
                          <>
                            <Text strong>连接注册</Text>
                            <br />
                            <Text type="secondary" style={{ fontSize: '12px' }}>sseManager注册客户端连接</Text>
                          </>
                        )
                      },
                      {
                        color: 'purple',
                        children: (
                          <>
                            <Text strong>心跳检测</Text>
                            <br />
                            <Text type="secondary" style={{ fontSize: '12px' }}>定时任务检查连接活跃度</Text>
                          </>
                        )
                      },
                      {
                        color: 'orange',
                        children: (
                          <>
                            <Text strong>事件触发</Text>
                            <br />
                            <Text type="secondary" style={{ fontSize: '12px' }}>服务器端事件发生</Text>
                          </>
                        )
                      },
                      {
                        color: 'red',
                        children: (
                          <>
                            <Text strong>消息推送</Text>
                            <br />
                            <Text type="secondary" style={{ fontSize: '12px' }}>向目标客户端推送消息</Text>
                          </>
                        )
                      },
                      {
                        color: 'cyan',
                        children: (
                          <>
                            <Text strong>前端接收</Text>
                            <br />
                            <Text type="secondary" style={{ fontSize: '12px' }}>前端接收并处理消息</Text>
                          </>
                        )
                      },
                      {
                        color: 'gray',
                        children: (
                          <>
                            <Text strong>连接清理</Text>
                            <br />
                            <Text type="secondary" style={{ fontSize: '12px' }}>非活动连接自动清理</Text>
                          </>
                        )
                      }
                    ]}
                  />
                </Card>
              </Col>
            </Row>
          </Tabs.TabPane>
        </Tabs>
      </Card>

      <Divider orientation="left" style={{ marginTop: '24px' }} className="section-title">部署架构</Divider>
      
      {/* 部署方案 */}
      <Row gutter={16}>
        <Col span={12}>
          <Card type="inner" title="开发环境">
            <div>
              <p>本地开发环境配置：</p>
              <ul style={{ margin: '8px 0 0 0', fontSize: '13px' }}>
                <li><Text strong>前端：</Text>Webpack Dev Server (localhost:8080)</li>
                <li><Text strong>后端：</Text>Nodemon 热重载 (localhost:8888)</li>
                <li><Text strong>数据库：</Text>本地MySQL实例</li>
                <li><Text strong>缓存：</Text>内存缓存（可选Redis）</li>
                <li><Text strong>调试：</Text>Node.js Inspector调试</li>
                <li><Text strong>代理：</Text>Webpack开发代理配置</li>
                <li><Text strong>日志：</Text>详细调试日志输出</li>
              </ul>
              <div style={{ marginTop: '16px' }}>
                <p><Text strong>后端启动命令：</Text></p>
                <div style={{ backgroundColor: '#f5f5f5', padding: '8px', borderRadius: '4px', fontFamily: 'monospace', fontSize: '12px' }}>
                  npm run dev
                </div>
              </div>
            </div>
          </Card>
        </Col>
        <Col span={12}>
          <Card type="inner" title="生产环境">
            <div>
              <p>生产环境部署方案：</p>
              <ul style={{ margin: '8px 0 0 0', fontSize: '13px' }}>
                <li><Text strong>前端：</Text>Webpack构建优化 + CDN加速</li>
                <li><Text strong>后端：</Text>PM2进程管理 + 负载均衡</li>
                <li><Text strong>数据库：</Text>MySQL主从复制</li>
                <li><Text strong>缓存：</Text>Redis高可用集群</li>
                <li><Text strong>监控：</Text>全链路监控 + 日志收集</li>
                <li><Text strong>容器化：</Text>Docker + Docker Compose</li>
                <li><Text strong>日志：</Text>结构化日志 + 文件轮转</li>
              </ul>
              <div style={{ marginTop: '16px' }}>
                <p><Text strong>后端部署命令：</Text></p>
                <div style={{ backgroundColor: '#f5f5f5', padding: '8px', borderRadius: '4px', fontFamily: 'monospace', fontSize: '12px' }}>
                  npm run pm2:prod  # PM2生产部署<br/>
                  npm run start:prod # 直接启动生产环境
                </div>
              </div>
            </div>
          </Card>
        </Col>
      </Row>

      <Divider orientation="left" style={{ marginTop: '24px' }} className="section-title">技术特色</Divider>
      
      {/* 技术亮点 */}
      <Row gutter={16} className="tech-items">
        <Col span={12}>
          <Card type="inner" title="前端技术特色">
            <ul style={{ margin: '0', fontSize: '13px' }}>
              <li>🚀 <Text strong>现代化构建：</Text>Webpack 5 + Babel + ESLint</li>
              <li>🎨 <Text strong>组件化开发：</Text>React Hooks + 函数式组件</li>
              <li>📦 <Text strong>状态管理：</Text>Redux Toolkit + 异步中间件</li>
              <li>🛣️ <Text strong>路由管理：</Text>动态路由 + 权限控制</li>
              <li>🎯 <Text strong>类型安全：</Text>ESLint + 代码规范</li>
              <li>📱 <Text strong>响应式设计：</Text>Ant Design 响应式布局</li>
              <li>⚡ <Text strong>性能优化：</Text>代码分割 + 懒加载 + Tree-shaking</li>
              <li>🧰 <Text strong>工具链：</Text>Thread-loader + 路径别名 + 多环境配置</li>
            </ul>
          </Card>
        </Col>
        <Col span={12}>
          <Card type="inner" title="后端技术特色">
            <ul style={{ margin: '0', fontSize: '13px' }}>
              <li>⚡ <Text strong>高性能：</Text>Express 5 + 异步非阻塞</li>
              <li>🔐 <Text strong>安全认证：</Text>JWT + 双Token机制 + Token自动清理</li>
              <li>📊 <Text strong>数据库：</Text>MySQL2 + 连接池优化</li>
              <li>📝 <Text strong>增强日志：</Text>结构化日志 + 链路追踪 + 错误序列化</li>
              <li>🔄 <Text strong>实时通信：</Text>SSE + 心跳检测 + 连接管理</li>
              <li>🛡️ <Text strong>权限控制：</Text>RBAC模型 + 中间件</li>
              <li>💾 <Text strong>智能缓存：</Text>Redis + 内存降级 + 自动切换</li>
              <li>⏰ <Text strong>定时任务：</Text>灵活调度 + 健康检查 + 资源清理</li>
              <li>🚦 <Text strong>优雅管理：</Text>健康检查 + 优雅关闭 + 资源释放</li>
            </ul>
          </Card>
        </Col>
      </Row>
      
      {/* 系统特性概览 */}
      <Row gutter={16} style={{ marginTop: 16 }} className="feature-overview">
        <Col span={24}>
          <Card type="inner" title="系统特性概览">
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '16px' }}>
              <div style={{ textAlign: 'center', padding: '16px', backgroundColor: '#f0f9ff', borderRadius: '8px' }}>
                <div style={{ fontSize: '24px', marginBottom: '8px' }}>🔐</div>
                <Text strong>安全认证体系</Text>
                <p style={{ fontSize: '12px', color: '#666', marginTop: '4px' }}>JWT + Token自动管理</p>
              </div>
              <div style={{ textAlign: 'center', padding: '16px', backgroundColor: '#f6ffed', borderRadius: '8px' }}>
                <div style={{ fontSize: '24px', marginBottom: '8px' }}>⚡</div>
                <Text strong>高性能架构</Text>
                <p style={{ fontSize: '12px', color: '#666', marginTop: '4px' }}>异步非阻塞 + 连接池优化</p>
              </div>
              <div style={{ textAlign: 'center', padding: '16px', backgroundColor: '#fff7e6', borderRadius: '8px' }}>
                <div style={{ fontSize: '24px', marginBottom: '8px' }}>🔄</div>
                <Text strong>实时通信能力</Text>
                <p style={{ fontSize: '12px', color: '#666', marginTop: '4px' }}>SSE推送 + 心跳检测</p>
              </div>
              <div style={{ textAlign: 'center', padding: '16px', backgroundColor: '#f9f0ff', borderRadius: '8px' }}>
                <div style={{ fontSize: '24px', marginBottom: '8px' }}>💾</div>
                <Text strong>智能缓存策略</Text>
                <p style={{ fontSize: '12px', color: '#666', marginTop: '4px' }}>Redis + 内存降级</p>
              </div>
              <div style={{ textAlign: 'center', padding: '16px', backgroundColor: '#e6f7ff', borderRadius: '8px' }}>
                <div style={{ fontSize: '24px', marginBottom: '8px' }}>📊</div>
                <Text strong>完善监控体系</Text>
                <p style={{ fontSize: '12px', color: '#666', marginTop: '4px' }}>健康检查 + 性能监控</p>
              </div>
              <div style={{ textAlign: 'center', padding: '16px', backgroundColor: '#fff1f0', borderRadius: '8px' }}>
                <div style={{ fontSize: '24px', marginBottom: '8px' }}>🛡️</div>
                <Text strong>统一错误处理</Text>
                <p style={{ fontSize: '12px', color: '#666', marginTop: '4px' }}>异常捕获 + 错误日志</p>
              </div>
            </div>
          </Card>
        </Col>
      </Row>

      <Divider orientation="left" style={{ marginTop: '24px' }} className="section-title">项目信息</Divider>
      
      {/* 项目基本信息 */}
      <Row gutter={16} className="info-list">
        <Col span={8}>
          <Card type="inner" title="前端项目信息">
            <div style={{ fontSize: '13px' }}>
              <p><Text strong>项目名称：</Text>react-antd-webpack</p>
              <p><Text strong>版本：</Text>1.0.0</p>
              <p><Text strong>Node版本：</Text>&gt;=18.0.0</p>
              <p><Text strong>核心依赖：</Text>React 18.2.0, Ant Design 5.26.2</p>
              <p><Text strong>构建工具：</Text>Webpack 5.99.9</p>
              <p><Text strong>状态管理：</Text>Redux Toolkit 2.2.6</p>
              <p><Text strong>包管理：</Text>Yarn</p>
            </div>
          </Card>
        </Col>
        <Col span={8}>
          <Card type="inner" title="后端项目信息">
            <div style={{ fontSize: '13px' }}>
              <p><Text strong>项目名称：</Text>node-express-mysql</p>
              <p><Text strong>版本：</Text>1.0.0</p>
              <p><Text strong>运行环境：</Text>Node.js 18+</p>
              <p><Text strong>核心框架：</Text>Express 5.1.0, MySQL2 3.15.2</p>
              <p><Text strong>缓存组件：</Text>ioredis 5.8.2</p>
              <p><Text strong>进程管理：</Text>PM2 / Nodemon</p>
              <p><Text strong>API文档：</Text>Swagger UI 5.0.1</p>
            </div>
          </Card>
        </Col>
        <Col span={8}>
          <Card type="inner" title="开发团队">
            <div style={{ fontSize: '13px' }}>
              <p><Text strong>作者：</Text>lyq</p>
              <p><Text strong>邮箱：</Text>lyqjob@yeah.net</p>
              <p><Text strong>许可证：</Text>MIT License</p>
              <p><Text strong>开发模式：</Text>前后端分离</p>
              <p><Text strong>代码规范：</Text>ESLint + Prettier</p>
              <p><Text strong>架构类型：</Text>企业级全栈应用</p>
            </div>
          </Card>
        </Col>
      </Row>
      <Row style={{ marginTop: 16 }}>
        <p style={{ fontSize: '12px', color: '#666' }}>提示：当前页面是AI基于React Ant Design Webpack项目结构生成的系统架构说明页面。</p>
      </Row>
    </div>
  );
};

export default ArchitectureEnhanced;